/**
 * 学习目标：使用React中的受控组件
 */
import React from 'react';
import ReactDOM from 'react-dom';

// 受控组价：🔔方便收集用户数据
// 1. state控制value或checked
// 2. 通过onChange和setState去更新数据

class App extends React.Component {
  state = {
    username: 'zs',
  };

  render() {
    return (
      <div>
        {/* 1. 使用state控制表单元素的value */}
        <input
          type="text"
          value={this.state.username}
          // 🔔React对事件进行过封装，表单的改变事件全部使用onChange，而不使用onInput
          onChange={this.handleChange}
          // 🔔原本的onChange是失去焦点，现在变为onBlur控制
          onBlur={() => {
            console.log('失去焦点了');
          }}
        />
      </div>
    );
  }

  handleChange = (e) => {
    // 2. 通过onChange和setState去更新数据
    this.setState({ username: e.target.value });
  };
}
ReactDOM.render(<App></App>, document.getElementById('root'));
